<template>
  <div class="logisticsCityRanking inset-shadow">
    <cardTitle text="城市物流流量排行榜TOP10"/>
    <div class="card-right-2">
      <div
        v-for="(item,i) in list"
        :key="i"
        class="bar-item">
        <div class="bar-left">
          <img v-if="i<3" :src="imgSrc(i)" class="img"/>
          <div v-else class="no">{{ i + 1 }}</div>
          <div class="city">{{ item.name }}</div>
        </div>
        <div class="bar-center">
          <div class="out-bar">
            <div :style="{width: item.value/maxValue*100+'%'}" class="inner-bar"></div>
          </div>
        </div>
        <div class="bar-right">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import cardTitle from '../cardTitle.vue'

export default {
  name: "logisticsCityRanking",
  props: {},
  components: {cardTitle},
  data () {
    return {
      list: [
        {
          name: "北京",
          value: 862520
        },
        {
          name: "上海",
          value: 562520
        },
        {
          name: "广州",
          value: 362520
        },
        {
          name: "深圳",
          value: 96252
        },
        {
          name: "杭州",
          value: 86252
        },
        {
          name: "南京",
          value: 76252
        }
        ,
        {
          name: "西安",
          value: 66252
        }
        ,
        {
          name: "武汉",
          value: 56252
        },
        {
          name: "天津",
          value: 46252
        },
        {
          name: "重庆",
          value: 36252
        }
      ]
    };
  },
  computed: {
    maxValue () {
      return Math.max(...this.list.map(item => item.value))
    }
  },
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    imgSrc (i) {
      return require(`../../images/rank${i}.png`)
    }
  },

};
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";

.logisticsCityRanking {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .card-right-2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    padding: 0 px-to-rem(16px) px-to-rem(10px) px-to-rem(16px);

    .bar-item {
      flex: 1;
      display: flex;
      align-items: center;

      .bar-left {
        display: flex;
        font-size: px-to-rem(12px);

        .img {
          width: px-to-rem(18px);
          height: px-to-rem(20px);
        }

        .no {
          width: px-to-rem(18px);
          font-size: px-to-rem(12px);
          color: #00b6ff;
          text-align: center;
        }

        .city {
          margin-left: px-to-rem(5px);
          color: rgba(255, 255, 255, 0.5);
          font-size: px-to-rem(12px);
        }
      }

      .bar-center {
        width: 65%;
        flex: 1;
        padding-left: px-to-rem(16px);

        .out-bar {
          width: 100%;
          height: px-to-rem(8px);
          background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 100%);
          border-radius: 3px;

          .inner-bar {
            width: 50%;
            height: 5px;
            background: linear-gradient(90deg, rgba(0, 182, 255, 0) 0%, #fff 100%);
            border-radius: 2px;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(90deg, rgba(0, 182, 255, 0), #00b6ff);
              filter: blur(8px); /* 模糊效果 */
            }
          }
        }
      }

      .bar-right {
        width: 10%;
        color: rgba(255, 255, 255, 0.9);
        font-size: px-to-rem(12px);
        padding-left: px-to-rem(20px);
      }
    }
  }
}
</style>
